.faultPage {
  height: 100vh;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;

  .nav {
    flex-shrink: 0;
    flex-grow: 0;
  }
}

.iconfont {
  position: relative;
  top: 1px;
}

.pageHeader {
  background: #fff;
}

.locationInfo {
  display: flex;
  gap: 24rpx;
  padding: 8rpx 32rpx;
  font-size: 24rpx;

  .iconfont {
    color: #c4c4c4;
    font-size: 28rpx;
  }
}

.faultAnalysis {
  padding: 22rpx 44rpx;
  line-height: 28rpx;
  font-size: 24rpx;

  .topLine {
    background: #FFF9F0;
    display: flex;
    justify-content: space-between;
    padding: 16rpx;

    .left {
      display: flex;
      gap: 11rpx;
    }

    .icon-tanhao {
      color: #ffb343;
      font-size: 28rpx;
    }

    .right {
      color: #058AFF;
    }
  }

  .bottomLine {
    background: #FFF9F0;
    color: #ffb343;
    padding: 16rpx;
    padding-top: 0;
  }
}

.faultList {
  padding: 24rpx;

  .list {
    background: #fff;
    padding: 24rpx;
    font-size: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
  }

}

.probability {
  color: #058aff;
  font-size: 48rpx;
}

.describe {
  padding: 8rpx 0;
}

.suggest {
  background: #f8f9fa;
  padding: 24rpx;
}

.suggestHeader {
  display: flex;
  justify-content: space-between;
  line-height: 32rpx;

  .left {
    display: flex;
    gap: 8rpx;

    .iconfont {
      color: #058aff;
    }
  }

  .right {
    color: #058aff;
  }
}

.suggestList {
  display: flex;
  flex-direction: column;
  padding: 12rpx 0;
  gap: 12rpx;

  .subItem {
    display: flex;
    gap: 12rpx;

    .index {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 24rpx;
      color: #fff;
      background: #058AFF;
      border-radius: 50%;
      text-align: center;
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }


}

.solution {
  overflow: hidden;
  padding-top: 24rpx;
}

.solutionImg {
  width: 100%;
}

.faultTimeLine {
  padding: 0 24rpx;

  .stats {
    padding: 12rpx 24rpx;
    font-size: 20rpx;
    display: flex;
    justify-content: center;
    gap: 40rpx;

    .count {
      color: #058AFF;
    }
  }

  .info {
    padding: 12rpx 24rpx 24rpx 24rpx;

    .content {
      padding: 10rpx 20rpx;
      border-left: #058AFF 8rpx solid;
      border-radius: 8rpx;
      font-size: 26rpx;
    }
  }
}

.timeLineMain {
  background: #fff;
  display: flex;
  flex-direction: column;


}

.title {
  display: flex;
  justify-content: space-between;
  padding: 24rpx;
  font-size: 24rpx;
  line-height: 28rpx;

  .left {
    display: flex;
    gap: 40rpx;

    .text {
      font-weight: bold;
      font-size: 28rpx;
    }

    .status {
      padding-left: 30rpx;
      position: relative;

      &::before {
        display: block;
        content: '';
        position: absolute;
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #058aff;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      &.offline::before {
        background: #FF6B6B;
      }
    }
  }

  .right {
    color: #058AFF;
  }
}

.timeLine {
  width: 100%;

  .inBox {
    display: flex;
    flex-direction: column;

    .scale {
      width: 1754rpx;

      .scaleImg {
        width: 100%;
      }
    }
  }
}

.faultChannal {
  padding: 24rpx;

  .channal {
    background: #fff;
  }

  .item {
    .info {
      display: flex;
      padding: 20rpx;
      gap: 20rpx;
      .mediaBox {
        width: 252rpx;
        height: 148rpx;
        background: #e7e7e7;
        flex-shrink: 0;
        position: relative;
        &.video{
          background: #adb5bd;
        }
        .capation {
          position: absolute;
          width: 100%;
          height: 32rpx;
          line-height: 32rpx;
          background: rgba(255, 255, 255, .5);
          font-size: 16rpx;
          text-align: center;
          left: 0;
          bottom: 0;
        }

        .iconfont {
          font-size: 48rpx;
          color: #808080;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
      }
      .brife{
        flex-grow: 1;
        font-size: 20rpx;
        color: #adb5bd;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        .name{
          font-size: 24rpx;
          color: #343a40;
        }
        .right{
          position: absolute;
          top: 23rpx;
          right: 0;
        }
      }
    }
    .moreInfo{
      border-top: #DEDFE0 2rpx solid;
      padding: 24rpx;
      font-size: 20rpx;
      .subList{
        display: flex;
        flex-direction: column;
        gap: 18rpx;
        .subItem{
          display: flex;
          justify-content: space-between;
          .value{
            color: #058AFF;
            &.red{
              color: #D92400;
            }
          }
        }
      }
      .dateLabel{
        text-align: right;
      }
      .moreButtonArea{
        padding: 60rpx 0;
        text-align: center;
      }
    }
  }
}